import React, { Fragment, useRef, useState, useEffect } from "react";
// 引入拖拽
import Draggable from "react-draggable";
import getAngle from "./angle";
import { IonContent } from "@ionic/react"
// SCss
import IndexStyle from "./index.module.scss";
const ChangeMusicCom = () => {
    const Dview = useRef();
    const [arrowStyle, setArrowStyle] = useState({});
    const [leftBorderStyle, setleftBorderStyle] = useState({});
    const [rightBorderStyle, setrightBorderStyle] = useState({});
    const DonStart = (e) => {
        console.log(e, '开始拖拽');
    }
    const DonStop = (e) => {
        console.log(e, "停止拖拽");
    }
    function DonDrag(data) {
        // let css = e.target.style.transform.match(/\(([^)]*)\)/)[1].split(",");
        let X =data.X, Y = data.Y;
        let R = getAngle(0, 50, X, Y);
        if(Y==100&&X>-55||Y==100&&X<65){
            return false;
        };
        setArrowStyle({
            transform: "rotateZ(" + R.angle + "deg)"
        });
        if (R.quadrant == 1 || R.quadrant == 4) {
            // console.log("右边",R.angle)
            setrightBorderStyle({
                transform: "rotateZ(" + (R.angle) + "deg)"
            });
            setleftBorderStyle({
                transform: "rotateZ(0deg)"
            })
        } else {
            // console.log("左边")
            setrightBorderStyle({
                transform: "rotateZ(0deg)"
            });
            setleftBorderStyle({
                transform: "rotateZ(" + R.angle + "deg)"
            });
        }
    }

    useEffect(() => {
        // return false;
        // 获取DOM元素  
        let block = Dview.current;
        let oW, oH, L = 30,ML = 150,T = 30 ,MT = 130;
        block.addEventListener("touchstart", function (e) {
            let touches = e.touches[0];
            oW = touches.clientX - block.offsetLeft;
            console.log(oW);
            oH = touches.clientY - block.offsetTop;
            document.addEventListener("touchmove", defaultEvent, false);
        }, false)

        block.addEventListener("touchmove", function (e) {
            let touches = e.touches[0];
            let oLeft = touches.clientX - oW;
            let oTop = touches.clientY - oH;
            if (oLeft < L) {
                oLeft = L;
            }  else if (oLeft > ML||oLeft == ML) {
                oLeft = ML
            }else if (oLeft > document.documentElement.clientWidth - block.offsetLeft) {
                oLeft = (document.documentElement.clientWidth - block.offsetLeft);
            }
            if (oTop < T) {
                oTop = T;
            } else if (oTop > document.documentElement.clientHeight - block.offsetHeight) {
                oTop = (document.documentElement.clientHeight - block.offsetHeight);
            } else if (oTop > MT || oTop == MT) {
                oTop = MT;
            };
            let X = parseInt(oLeft)-e.target.offsetParent.clientWidth/2+e.target.clientWidth/2,
             Y = parseInt(oTop)-30;
            DonDrag({X:X,Y:Y});
            block.style.left = oLeft + "px";
            block.style.top = oTop + "px";
        }, false);

        block.addEventListener("touchend", function () {
            document.removeEventListener("touchmove", defaultEvent, false);
        }, false);

        function defaultEvent(e) {
            e.preventDefault();
        }
    }, [])
    return (
        <div className={`${[IndexStyle.marginTop].join(" ")}`}>
            {/* 按键视图 */}
            <div className={`${[IndexStyle.BtnView].join(' ')}`}>
                {/* 左部分小于0 */}
                <div style={leftBorderStyle} className={`${[IndexStyle.leftBorder, IndexStyle.borderOption].join(" ")}`}></div>
                {/* 右半部分大于0 */}
                <div style={rightBorderStyle} className={`${[IndexStyle.rightBorder, IndexStyle.borderOption].join(" ")}`}></div>

                <div style={arrowStyle} className={`${[IndexStyle.coverView].join(" ")}`}>
                    {/* 小箭头 */}
                    <div
                        className={`${[IndexStyle.arrowView].join(" ")}`}></div>
                </div>


                <div ref={Dview} className={`${[IndexStyle.Dview].join(" ")}`}></div>
                {/* 虚拟触点 */}
                {/* <Draggable
                    axis="both"
                    nodeRef={Dview}
                    onStart={DonStart}
                    onStop={DonStop}
                    onDrag={DonDrag}
                    bounds={{ left: -90, top: -30, right: 90, bottom: 130 }}
                    defaultPosition={{ x: 0, y: 0 }}
                >
                    <div ref={Dview} className={`${[IndexStyle.Dview].join(" ")}`}></div>
                </Draggable> */}

            </div>
            {/* 原生js 拖拽 */}

        </div>
    )
}
export default ChangeMusicCom;